<template>
    <div>
        <div v-for="(v,index) in list" :key="index" class="ge" @click="miuse(v.musicMp3Url)">
           <div class="paixv">
               <img :src="v.albumPicUrl" class="img">
           </div>
           <div class="p">
            <p>歌曲：{{v.musicName}}</p>
            <p>演唱：{{v.artistName}}</p>
            <p>专辑：{{v.albumName}}</p>
           </div>
           
        </div>
        
    </div>
</template>
<script>
export default {
    name:"nativ",
    data(){
        return{
            list:{}
        }
    },
    methods:{
        miuse(v){
            this.$store.commit("miuse",v);
        }
    },
    mounted(){
      
    },
    watch:{
        $route:{
            handler(path){
                console.log(path.params.id)
                var id = JSON.parse(sessionStorage.getItem("active")) ;
                if(!id || id==1){
                    id = 1
                    
                    var token = sessionStorage.getItem("token")
                var str = `id=${id}&token=${token}`
                this.axios.post("http://123.57.130.65:8080/recommend/findAll",str).then(res=>{
                    if(res.data.code==200){
                        console.log(res);
                        this.list=res.data.data
                    }else{
                        this.$router.push("/rester");
                    }
                })
                }else{
                   
                    var token = sessionStorage.getItem("token")
                var str = `id=${id}&token=${token}`
                this.axios.post("http://123.57.130.65:8080/navigation/findMusicsById",str).then(res=>{
                    if(res.data.code==200){
                        console.log(res);
                        this.list=res.data.data
                    }else{
                        this.$router.push("/rester");
                    }
                })
                }
                
                
          
        },
            immediate:true
        }
    }
}
</script>
<style scoped>
.paixv{
    width: 60px;
    height: 70px;
    display: inline;
    flex-wrap:wrap;
    margin: 10px;
}
.img{
     width: 60px;
    height: 70px;
}

.ge{
    display: flex;
    background-color: #dfeef5;
    width: 100%;
    height: 100px ;
    margin-top: 5px;
}
.p{
    font-size: 10px;
    color: #5188b4;
}

</style>